<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高级暗色系交互网页</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #3b82f6;
            --secondary: #8b5cf6;
            --accent: #10b981;
            --dark: #0f172a;
            --darker: #020617;
        }

        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: var(--darker);
            color: #e2e8f0;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        .glass-card {
            background: rgba(15, 23, 42, 0.7);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
        }

        .neon-text {
            text-shadow: 0 0 5px var(--primary), 0 0 10px var(--primary), 0 0 20px var(--primary);
        }

        .neon-border {
            box-shadow: 0 0 5px var(--primary), 0 0 10px var(--primary), inset 0 0 5px var(--primary);
        }

        .gradient-text {
            background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .cursor-trail {
            position: fixed;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: rgba(59, 130, 246, 0.5);
            pointer-events: none;
            transform: translate(-50%, -50%);
            z-index: 9999;
            filter: blur(1px);
        }

        .particle {
            position: absolute;
            border-radius: 50%;
            background: rgba(59, 130, 246, 0.6);
            pointer-events: none;
        }

        .scroll-indicator {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            width: 24px;
            height: 40px;
            border: 2px solid var(--primary);
            border-radius: 12px;
        }

        .scroll-indicator::before {
            content: '';
            position: absolute;
            top: 6px;
            left: 50%;
            transform: translateX(-50%);
            width: 4px;
            height: 8px;
            background: var(--primary);
            border-radius: 2px;
            animation: scroll 2s infinite;
        }

        @keyframes scroll {
            0% {
                opacity: 1;
                transform: translateY(0) translateX(-50%);
            }

            100% {
                opacity: 0;
                transform: translateY(16px) translateX(-50%);
            }
        }

        .timeline-item::before {
            content: '';
            position: absolute;
            left: -20px;
            top: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(to bottom, var(--primary), var(--secondary));
        }

        .timeline-dot {
            position: absolute;
            left: -26px;
            top: 8px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--primary);
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
        }
    </style>
</head>

<body class="min-h-screen">
    <!-- 鼠标跟随特效 -->
    <div class="cursor-trail" id="cursor-trail"></div>

    <!-- 粒子背景 -->
    <div id="particles-container" class="fixed inset-0 overflow-hidden pointer-events-none"></div>

    <!-- 入场动画 -->
    <div id="loader"
        class="fixed inset-0 z-50 flex flex-col items-center justify-center bg-gray-900 transition-opacity duration-1000">
        <div class="relative w-32 h-32 mb-8">
            <div class="absolute inset-0 rounded-full bg-blue-500 opacity-20 animate-ping"></div>
            <div
                class="absolute inset-4 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-white" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
            </div>
        </div>
        <h1 class="text-4xl font-bold mb-2 gradient-text">加载中</h1>
        <p class="text-gray-400">正在准备极致视觉体验...</p>
    </div>

    <!-- 主内容区 -->
    <main class="relative z-10">
        <!-- 英雄区域 -->
        <section class="min-h-screen flex flex-col justify-center relative overflow-hidden">
            <div class="absolute inset-0 z-0 opacity-20">
                <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-purple-600 filter blur-3xl opacity-40">
                </div>
                <div
                    class="absolute bottom-1/4 right-1/4 w-64 h-64 rounded-full bg-blue-600 filter blur-3xl opacity-40">
                </div>
            </div>

            <div class="container mx-auto px-6 py-20 relative z-10">
                <div class="max-w-4xl mx-auto text-center">
                    <h1 class="text-5xl md:text-7xl font-bold mb-6 neon-text">
                        <span class="gradient-text">高级暗色系</span>
                        <br>交互体验
                    </h1>
                    <p class="text-xl md:text-2xl text-gray-300 mb-10 max-w-3xl mx-auto">
                        探索深邃科技美学与现代交互设计的完美融合
                    </p>
                    <div class="flex flex-wrap justify-center gap-4">
                        <button
                            class="px-8 py-3 rounded-full bg-gradient-to-r from-blue-600 to-purple-600 text-white font-medium hover:shadow-lg hover:shadow-blue-500/30 transition-all duration-300 transform hover:-translate-y-1">
                            开始探索
                        </button>
                        <button
                            class="px-8 py-3 rounded-full border border-gray-700 text-gray-300 font-medium hover:bg-gray-800/50 hover:border-blue-500 transition-all duration-300">
                            了解更多
                        </button>
                    </div>
                </div>
            </div>

            <div class="scroll-indicator"></div>
        </section>

        <!-- 特性展示 -->
        <section class="py-20 relative">
            <div class="absolute top-0 left-0 w-full h-1/2 bg-gradient-to-b from-blue-900/20 to-transparent"></div>
            <div class="container mx-auto px-6">
                <div class="text-center mb-16">
                    <h2 class="text-3xl md:text-4xl font-bold mb-4 gradient-text">核心特性</h2>
                    <p class="text-xl text-gray-400 max-w-2xl mx-auto">体验前沿设计语言与创新交互技术的完美结合</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <!-- 特性卡片 1 -->
                    <div
                        class="glass-card rounded-xl p-8 transition-all duration-500 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/20">
                        <div
                            class="w-16 h-16 rounded-lg bg-blue-900/50 flex items-center justify-center mb-6 neon-border">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-400" fill="none"
                                viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M13 10V3L4 14h7v7l9-11h-7z" />
                            </svg>
                        </div>
                        <h3 class="text-2xl font-bold mb-3 text-white">闪电性能</h3>
                        <p class="text-gray-400">经过优化的代码架构确保流畅体验，即使在复杂动画下也能保持60fps的丝滑表现。</p>
                    </div>

                    <!-- 特性卡片 2 -->
                    <div
                        class="glass-card rounded-xl p-8 transition-all duration-500 hover:scale-105 hover:shadow-lg hover:shadow-purple-500/20">
                        <div
                            class="w-16 h-16 rounded-lg bg-purple-900/50 flex items-center justify-center mb-6 neon-border">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-purple-400" fill="none"
                                viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                            </svg>
                        </div>
                        <h3 class="text-2xl font-bold mb-3 text-white">炫酷动效</h3>
                        <p class="text-gray-400">精心设计的粒子系统、光效和过渡动画，带来令人印象深刻的视觉冲击力。</p>
                    </div>

                    <!-- 特性卡片 3 -->
                    <div
                        class="glass-card rounded-xl p-8 transition-all duration-500 hover:scale-105 hover:shadow-lg hover:shadow-green-500/20">
                        <div
                            class="w-16 h-16 rounded-lg bg-green-900/50 flex items-center justify-center mb-6 neon-border">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-400" fill="none"
                                viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
                            </svg>
                        </div>
                        <h3 class="text-2xl font-bold mb-3 text-white">响应式设计</h3>
                        <p class="text-gray-400">完美适配各种设备屏幕，从手机到4K显示器都能获得最佳浏览体验。</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 数据可视化 -->
        <section class="py-20 bg-gradient-to-b from-gray-900/50 to-gray-900/20">
            <div class="container mx-auto px-6">
                <div class="text-center mb-16">
                    <h2 class="text-3xl md:text-4xl font-bold mb-4 gradient-text">数据洞察</h2>
                    <p class="text-xl text-gray-400 max-w-2xl mx-auto">通过交互式图表直观展示关键指标</p>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                    <div>
                        <div class="glass-card rounded-xl p-6 h-full">
                            <h3 class="text-2xl font-bold mb-6 text-white">月度增长趋势</h3>
                            <div class="h-64">
                                <!-- 图表占位 -->
                                <lottie-player src="https://assets5.lottiefiles.com/packages/lf20_utqph5al.json"
                                    background="transparent" speed="1" loop autoplay></lottie-player>
                            </div>
                        </div>
                    </div>

                    <div class="space-y-6">
                        <div class="glass-card rounded-xl p-6">
                            <h3 class="text-xl font-bold mb-4 text-white">用户分布</h3>
                            <div class="h-48">
                                <!-- 图表占位 -->
                                <lottie-player src="https://assets5.lottiefiles.com/packages/lf20_obhph3sh.json"
                                    background="transparent" speed="1" loop autoplay></lottie-player>
                            </div>
                        </div>

                        <div class="glass-card rounded-xl p-6">
                            <h3 class="text-xl font-bold mb-4 text-white">满意度指标</h3>
                            <div class="flex items-center space-x-4">
                                <div class="flex-1">
                                    <div class="h-3 bg-gray-800 rounded-full overflow-hidden">
                                        <div class="h-full bg-gradient-to-r from-blue-500 to-green-500 rounded-full"
                                            style="width: 92%"></div>
                                    </div>
                                </div>
                                <span class="text-2xl font-bold gradient-text">92%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 时间线 -->
        <section class="py-20 relative">
            <div class="container mx-auto px-6">
                <div class="text-center mb-16">
                    <h2 class="text-3xl md:text-4xl font-bold mb-4 gradient-text">发展历程</h2>
                    <p class="text-xl text-gray-400 max-w-2xl mx-auto">见证我们的里程碑与关键节点</p>
                </div>

                <div class="relative max-w-3xl mx-auto">
                    <div
                        class="absolute left-1/2 top-0 h-full w-0.5 bg-gradient-to-b from-blue-500 to-purple-600 transform -translate-x-1/2">
                    </div>

                    <div class="space-y-12">
                        <!-- 时间线项目 1 -->
                        <div class="relative pl-16 timeline-item">
                            <div class="timeline-dot"></div>
                            <div
                                class="glass-card rounded-xl p-6 hover:shadow-lg hover:shadow-blue-500/20 transition-all duration-300">
                                <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
                                    <h3 class="text-xl font-bold text-white">项目启动</h3>
                                    <span class="text-blue-400">2020年1月</span>
                                </div>
                                <p class="text-gray-400">构思并启动了这一创新项目，组建了核心团队，制定了初步的发展路线图。</p>
                            </div>
                        </div>

                        <!-- 时间线项目 2 -->
                        <div class="relative pl-16 timeline-item">
                            <div class="timeline-dot"></div>
                            <div
                                class="glass-card rounded-xl p-6 hover:shadow-lg hover:shadow-purple-500/20 transition-all duration-300">
                                <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
                                    <h3 class="text-xl font-bold text-white">首版发布</h3>
                                    <span class="text-purple-400">2020年6月</span>
                                </div>
                                <p class="text-gray-400">经过半年的开发，推出了第一个公开版本，获得了早期用户的积极反馈。</p>
                            </div>
                        </div>

                        <!-- 时间线项目 3 -->
                        <div class="relative pl-16 timeline-item">
                            <div class="timeline-dot"></div>
                            <div
                                class="glass-card rounded-xl p-6 hover:shadow-lg hover:shadow-green-500/20 transition-all duration-300">
                                <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
                                    <h3 class="text-xl font-bold text-white">重大升级</h3>
                                    <span class="text-green-400">2021年3月</span>
                                </div>
                                <p class="text-gray-400">全面重构了技术架构，引入了多项创新功能，用户体验得到显著提升。</p>
                            </div>
                        </div>

                        <!-- 时间线项目 4 -->
                        <div class="relative pl-16 timeline-item">
                            <div class="timeline-dot"></div>
                            <div
                                class="glass-card rounded-xl p-6 hover:shadow-lg hover:shadow-blue-500/20 transition-all duration-300">
                                <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
                                    <h3 class="text-xl font-bold text-white">用户突破</h3>
                                    <span class="text-blue-400">2022年1月</span>
                                </div>
                                <p class="text-gray-400">月活跃用户突破100万，标志着产品进入规模化发展阶段。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 可折叠卡片 -->
        <section class="py-20 bg-gradient-to-b from-gray-900/20 to-gray-900/50">
            <div class="container mx-auto px-6">
                <div class="text-center mb-16">
                    <h2 class="text-3xl md:text-4xl font-bold mb-4 gradient-text">常见问题</h2>
                    <p class="text-xl text-gray-400 max-w-2xl mx-auto">解答您可能关心的问题</p>
                </div>

                <div class="max-w-3xl mx-auto space-y-4">
                    <!-- 问题卡片 1 -->
                    <div class="group">
                        <button
                            class="w-full flex items-center justify-between p-6 glass-card rounded-xl transition-all duration-300 group-hover:shadow-lg group-hover:shadow-blue-500/20">
                            <h3 class="text-xl font-bold text-left text-white">如何开始使用这个产品？</h3>
                            <svg xmlns="http://www.w3.org/2000/svg"
                                class="h-6 w-6 text-gray-400 transform transition-transform duration-300 group-[.is-active]:rotate-180"
                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M19 9l-7 7-7-7" />
                            </svg>
                        </button>
                        <div
                            class="px-6 overflow-hidden max-h-0 transition-all duration-300 group-[.is-active]:max-h-96">
                            <div class="pb-6 text-gray-400">
                                <p>